<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.datatable.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.datatable.basicDemo.description' | translate }}
    </div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="basic" [sourceData]="basicSource">
            <d-basic demo></d-basic>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="basic-old" [sourceData]="basicOldSource">
            <d-basic-old demo></d-basic-old>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'mutil-styles'">
    <div class="devui-demo-title">{{ 'components.datatable.mutilStylesDemo.title' | translate }}</div>
    <d-codebox id="styels" [sourceData]="mutilStyles">
      <d-mutil-styles demo></d-mutil-styles>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'async-loading'">
    <div class="devui-demo-title">{{ 'components.datatable.asyncDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.asyncDemo.description' | translate }}</div>
    <d-codebox id="table-async" [sourceData]="asyncSource">
      <d-datatable-demo-async demo></d-datatable-demo-async>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'table-interaction'">
    <div class="devui-demo-title">{{ 'components.datatable.interactionDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.datatable.interactionDemo.description' | translate }}
    </div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="interaction" [sourceData]="interactionSource">
            <d-interaction demo></d-interaction>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="table-one" [sourceData]="interactionColumnSource">
            <d-interaction-column demo></d-interaction-column>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'table-check-options'">
    <div class="devui-demo-title">{{ 'components.datatable.checkOptionsDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.checkOptionsDemo.description' | translate }}</div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="table-check-options" [sourceData]="checkOptionSource">
            <d-check-options demo></d-check-options>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="d-check-options-column" [sourceData]="checkOptionColSource">
            <d-check-options-column demo></d-check-options-column>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'lazy-loading-of-list-data'">
    <div class="devui-demo-title">{{ 'components.datatable.lazyDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.lazyDemo.description' | translate }}</div>
    <d-codebox id="table-lazy" [sourceData]="lazySource">
      <d-datatable-demo-lazyloaddata demo></d-datatable-demo-lazyloaddata>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'virtual-scroll'">
    <div class="devui-demo-title">{{ 'components.datatable.virtualScrollDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.virtualScrollDemo.description' | translate }}</div>
    <d-codebox id="cell-merge" [sourceData]="virtualScrollSource">
      <d-virtual-scroll demo></d-virtual-scroll>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'table-fixing'">
    <div class="devui-demo-title">{{ 'components.datatable.maxHeightDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.maxHeightDemo.description' | translate }}</div>
    <d-codebox id="table-max" [sourceData]="maxHeightSource">
      <d-datatable-demo-maxheight demo></d-datatable-demo-maxheight>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'fixed-virtual-scroll'">
    <div class="devui-demo-title">{{ 'components.datatable.fixHeightVirtualScrollDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.fixHeightVirtualScrollDemo.description' | translate }}</div>
    <d-codebox id="table-max" [sourceData]="fixHeightVirtualScrollSource">
      <d-fix-header-virtual-scroll demo></d-fix-header-virtual-scroll>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'header-grouping'">
    <div class="devui-demo-title">{{ 'components.datatable.headerGroupingDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      <div>{{ 'components.datatable.headerGroupingDemo.description' | translate }}</div>
    </div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="header-grouping" [sourceData]="headerGroupingSource">
            <d-header-grouping demo></d-header-grouping>
          </d-codebox>
        </ng-template>
      </d-tab>

      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="table-multi" [sourceData]="multiSource">
            <d-datatable-demo-multiheader demo></d-datatable-demo-multiheader>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'edit-cell'">
    <div class="devui-demo-title">{{ 'components.datatable.editableDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      <div>{{ 'components.datatable.editableDemo.description' | translate }}</div>
    </div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="editable" [sourceData]="editableSource">
            <d-editable demo></d-editable>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="editable-old" [sourceData]="editableOldSource">
            <d-editable-old demo></d-editable-old>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'expand-row'">
    <div class="devui-demo-title">{{ 'components.datatable.expandRowDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      <div>{{ 'components.datatable.expandRowDemo.description' | translate }}</div>
    </div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="expand-row" [sourceData]="expandRowSource">
            <d-expand-row demo></d-expand-row>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="expand-row-old" [sourceData]="expandRowOldSource">
            <d-expand-row-old demo></d-expand-row-old>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'tree-form'">
    <div class="devui-demo-title">{{ 'components.datatable.treeTableDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.treeTableDemo.description' | translate }}</div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="tree-table" [sourceData]="treeTableSource">
            <d-tree-data demo></d-tree-data>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="tree-table" [sourceData]="treeTableOldSource">
            <d-tree-table-old demo></d-tree-table-old>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'fixed-column'">
    <div class="devui-demo-title">{{ 'components.datatable.fixColumnDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.fixColumnDemo.description' | translate }}</div>
    <d-tabs [type]="'tabs'">
      <d-tab id="tab1" title="{{ 'components.datatable.allDemo.tab1' | translate }}" tabId="tab1">
        <ng-template dTabContent>
          <d-codebox id="fix-column" [sourceData]="fixColumnSource">
            <d-fix-column demo></d-fix-column>
          </d-codebox>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" title="{{ 'components.datatable.allDemo.tab2' | translate }}" tabId="tab2">
        <ng-template dTabContent>
          <d-codebox id="fix-column-old" [sourceData]="fixColumnOldSource">
            <d-fix-column-old demo></d-fix-column-old>
          </d-codebox>
        </ng-template>
      </d-tab>
    </d-tabs>
  </div>
  <div class="devui-demo-example" [dAnchor]="'column-dragging'">
    <div class="devui-demo-title">{{ 'components.datatable.dragColumnDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.dragColumnDemo.description' | translate }}</div>
    <d-codebox id="drag-column" [sourceData]="dragColumnSource">
      <d-drag-column demo></d-drag-column>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'cell-merge'">
    <div class="devui-demo-title">{{ 'components.datatable.cellMergeDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.cellMergeDemo.description' | translate }}</div>
    <d-codebox id="cell-merge" [sourceData]="cellMergeSource">
      <d-cell-merge demo></d-cell-merge>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'drag-row'">
    <div class="devui-demo-title">{{ 'components.datatable.dragRowDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.dragRowDemo.description' | translate }}</div>
    <d-codebox id="cell-merge" [sourceData]="dragRowSource">
      <d-drag-row demo></d-drag-row>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'muti-drag-row'">
    <div class="devui-demo-title">{{ 'components.datatable.batchDragRowDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datatable.batchDragRowDemo.description' | translate }}</div>
    <d-codebox id="cell-merge" [sourceData]="mutiDragRowSource">
      <d-muti-drag-row demo></d-muti-drag-row>
    </d-codebox>
  </div>
</div>
